<meta charset="UTF-8">
<script src="jquery.js"></script>

<body>
    <div id="n1" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
    <div id="n2" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
    <div id="n3" style="width: 200px; height: 100px; border: 1px solid #ccc;" ></div>
</body>

<script>
    var $divs = $("div");

    // 为每个div元素上的队列"q"设置(替换成)新的队列
    // (由于之前没有队列"q",这相当于新增一个对垒"q")
    
    $divs.queue("q", [
        function(next){ alert("队列函数1"); /* next(); 调用该函数可以移除并执行当前队列中的第一个函数 */ } ,
        function(next){ alert("队列函数2"); } ,
        function(next){ alert("队列函数3"); }
    ]);

    var queue = $divs.queue("q"); // 获取第一个div元素的队列"q"

    
    var queue1 = $("#n1").queue("q");
    var queue2 = $("#n2").queue("q");
    var queue3 = $("#n3").queue("q");
   console.log( queue === queue1 ); // true
   console.log( queue === queue2 ); // false
   console.log( queue === queue3 ); // false

   console.log( queue.length ); // 3

    // 为n1的队列"q"的末尾添加一个处理函数
    $("#n1").queue("q", function(){
        // 这里的this表示当前DOM元素(n1)
        alert("队列函数4");
    });

   console.log( queue.length ); // 4

    // 使用dequeue()可以移除并执行队列中的第一个函数
    $("#n1").dequeue("q"); // 弹出对话框："队列函数1"
</script>